<template>
	<view class="tax-management-page">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#FFFFFF" :placeholder="true">
			<view slot="left" class="">
				<navigator url="/pages/index/index" open-type="switchTab" class="">
					<view style="display: flex;">
						<u-icon color="#1e88e5" name="arrow-left" style="margin-left: 1rpx;"></u-icon>
						<view class="navbar-title">
							报税管理
						</view>
					</view>
				</navigator>
			</view>
			<view slot="right" class="navbar-right flex items-center">
				<view
					class="nav-item flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100 transition-all"
					@click="showFilterMenu">
					<u-icon color="#4285F4" name="more-dot-fill" size="22"></u-icon>
				</view>
			</view>
		</u-navbar>
		<!-- 状态统计卡片 -->
		<view class="status-cards py-4 px-4 bg-white">
			<view class="status-container flex flex-wrap">
				<view v-for="(status, index) in statusList" :key="index"
					class="status-card flex items-center bg-white rounded-xl shadow-sm p-4 mx-2 my-2 transition-all duration-300 cursor-pointer"
					:class="{ 'active': selectedStatus === status.value }" @click="changeStatus(status.value)">
					<view class="status-icon w-12 h-12 rounded-full flex items-center justify-center mr-3"
						:class="['status-' + getStatusClassSuffix(status.value)]">
						<u-icon :name="getStatusIcon(status.value)" size="20"
							:color="getStatusColor(status.value)"></u-icon>
					</view>
					<view class="status-info">
						<view class="status-name text-gray-600 text-sm">{{ status.name }}</view>
						<view class="status-count text-primary font-semibold text-lg">{{ status.count }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 税种选择 -->
		<view class="tax-type-tabs py-3 px-4 bg-white border-b border-gray-100">
			<scroll-view scroll-x class="tabs-scroll">
				<view v-for="(type, index) in taxTypes" :key="index"
					class="tab-item inline-flex items-center justify-center px-5 py-2.5 rounded-full text-sm font-medium mx-1 hover:bg-gray-100 transition-all cursor-pointer"
					:class="{ 'active': selectedTaxType === type.id }" @click="changeTaxType(type.id)">
					<text>{{ type.name }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 搜索和日期选择 -->
		<view class="search-bar py-3 px-4 bg-white">
			<view class="search-input flex-1 relative">
				<u-icon name="search" class="absolute left-3 top-1/2 transform -translate-y-1/2" color="#999999"
					size="16"></u-icon>
				<input type="text" placeholder="请输入客户名称或标签" v-model="searchKeyword" @input="handleSearch"
					class="w-full h-11 rounded-lg border border-gray-200 pl-10 pr-4 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all">
			</view>
			<view
				class="date-picker flex items-center justify-center w-28 h-11 ml-2 bg-white rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
				@click="showDatePicker">
				<u-icon name="calendar" size="16" class="mr-1"></u-icon>
				<text class="text-sm">{{ formattedDate }}</text>
			</view>
		</view>

		<!-- 公司列表 -->
		<view class="company-list py-4 px-4">
			<view v-for="(company, index) in filteredCompanyList" :key="index"
				class="company-card bg-white rounded-xl shadow-sm overflow-hidden mb-4 hover:shadow-md transition-all duration-300"
				@click="showCompanyDetail(company)">
				<view class="card-header p-4 flex items-center justify-between border-b border-gray-100">
					<view class="company-name flex items-center">
						<text class="text-lg font-medium text-gray-800">{{ company.companyName }}</text>
						<view class="company-tags ml-2">
							<text class="tag bg-blue-100 text-blue-700 text-xs px-2 py-0.5 rounded"
								v-if="company.isKp">票</text>
							<text class="tag bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded ml-1"
								v-if="company.isZjd">介</text>
						</view>
					</view>
					<view class="company-region flex items-center text-gray-500">
						<u-icon name="map" size="14" class="mr-1"></u-icon>
						<text>{{ company.area }}</text>
					</view>
				</view>
				<view class="card-body p-4 text-sm">
					<view class="info-row flex items-center mb-3">
						<u-icon name="tags" size="14" color="#999999" class="mr-2"></u-icon>
						<text class="label text-gray-500 w-20">企业类型：</text>
						<text class="value text-gray-800">{{ company.taxType }}</text>
					</view>
					<view class="info-row flex items-center mb-3">
						<u-icon name="file-text" size="14" color="#999999" class="mr-2"></u-icon>
						<text class="label text-gray-500 w-20">执照类型：</text>
						<text class="value text-gray-800">{{ company.scale }}</text>
					</view>
					<view class="info-row flex items-center">
						<u-icon name="rmb" size="14" color="#999999" class="mr-2"></u-icon>
						<text class="label text-gray-500 w-20">税款：</text>
						<text class="value text-gray-800 font-medium">{{ company.taxAmount }}</text>
					</view>
				</view>
				<view class="card-footer flex justify-between items-center p-3 bg-gray-50 border-t border-gray-100">
					<view class="status-badge px-3 py-1 rounded-full text-xs font-medium flex items-center"
						:class="[getStatusClass(company.declareState)]">
						<u-icon :name="getStatusIcon(company.declareState)" size="12" class="mr-1"></u-icon>
						<text>{{ getStatusText(company.declareState) }}</text>
					</view>
					<view class="action-buttons flex">
						<view
							class="action-btn px-4 py-1.5 rounded-md text-xs flex items-center justify-center bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all mr-2"
							:class="{ 'disabled': !canDeclare(company), 'bg-primary text-white hover:bg-blue-600': canDeclare(company) }"
							@click.stop="handleDeclare(company)">
							<u-icon name="edit-pen" size="12" class="btn-icon mr-1"></u-icon>
							<text>申报</text>
						</view>
						<view
							class="action-btn px-4 py-1.5 rounded-md text-xs flex items-center justify-center bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all"
							@click.stop="handleCheck(company)">
							<u-icon name="eye" size="12" class="btn-icon mr-1"></u-icon>
							<text>检查</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="no-data flex flex-col items-center justify-center py-16"
				v-if="filteredCompanyList.length === 0">
				<view class="text-center p-6 bg-white rounded-xl shadow-sm">
					<u-icon name="search" size="60" color="#E5E7EB" class="mb-4"></u-icon>
					<text class="no-data-title block text-gray-500 text-lg mb-2">暂无匹配数据</text>
					<text class="no-data-desc text-gray-400 text-sm">请尝试调整筛选条件</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-action-bar fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 py-3 px-4 z-10"
			v-if="hasSelectedCompanies">
			<view class="select-all flex items-center">
				<u-checkbox v-model="selectAll" @change="toggleSelectAll" size="18"></u-checkbox>
				<text class="ml-2 text-gray-700">全选</text>
			</view>
			<view class="action-buttons flex">
				<view
					class="btn batch-declare flex items-center justify-center px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-all mr-2"
					@click="batchDeclare">
					<u-icon name="edit-pen" size="16" class="mr-2"></u-icon>
					<text>批量申报</text>
				</view>
				<view
					class="btn batch-cancel flex items-center justify-center px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all"
					@click="batchCancel">
					<u-icon name="close" size="16" class="mr-2"></u-icon>
					<text>批量取消</text>
				</view>
			</view>
		</view>

		<!-- 申报弹窗 -->
		<u-modal v-model="declareModalShow" title="申报信息" :show-confirm-button="false" :border-radius="16" width="85%">
			<view class="declare-form py-4">
				<view class="form-group mb-4">
					<text class="form-label block text-gray-700 mb-2">申报图片：</text>
					<u-upload :action="uploadUrl" :auto-upload="false" @on-change="handleFileChange" ref="upload"
						multiple upload-text="点击上传" :max-count="3"></u-upload>
				</view>
				<view class="form-group">
					<text class="form-label block text-gray-700 mb-2">备注：</text>
					<textarea v-model="declareRemark" placeholder="请输入备注信息"
						class="remark-input w-full h-24 p-3 border border-gray-200 rounded-lg text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"></textarea>
				</view>
			</view>
			<view class="modal-footer flex justify-between py-3 border-t border-gray-100">
				<view
					class="btn cancel-btn flex-1 h-11 rounded-lg flex items-center justify-center bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all mr-2"
					@click="declareModalShow = false">
					<text>取消</text>
				</view>
				<view
					class="btn fail-btn flex-1 h-11 rounded-lg flex items-center justify-center bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all mr-2"
					@click="handleDeclareFail">
					<text>申报失败</text>
				</view>
				<view
					class="btn success-btn flex-1 h-11 rounded-lg flex items-center justify-center bg-primary text-white hover:bg-blue-600 transition-all"
					@click="handleDeclareSuccess">
					<text>确认申报</text>
				</view>
			</view>
		</u-modal>

		<!-- 筛选弹窗 -->
		<u-modal :show="filterModalShow" title="高级筛选" :show-confirm-button="false" :show-cancel-button="false"
			:border-radius="16" width="90%" :z-index="9999" :close-on-click-overlay="true" @close="handleModalClose">
			<view class="filter-form py-5 px-5">
				<!-- 区域选择 -->
				<view class="form-group mb-5">
					<text class="form-label block text-gray-800 mb-2 text-base">区域选择：</text>
					<u-select v-model="selectedRegion" :list="regionList" placeholder="请选择区域"
						@confirm="handleRegionSelect" border-radius="8" input-align="left" border="none"
						placeholder-style="color: #999"></u-select>
				</view>

				<!-- 企业资格类型 -->
				<view class="form-group mb-5">
					<text class="form-label block text-gray-800 mb-2 text-base">企业资格类型：</text>
					<view class="flex flex-wrap">
						<view class="flex items-center mr-6 mb-2" @click="selectedTaxpayerType = 0">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="selectedTaxpayerType === 0"></view>
							</view>
							<text class="text-gray-700">小规模</text>
						</view>
						<view class="flex items-center mr-6 mb-2" @click="selectedTaxpayerType = 1">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="selectedTaxpayerType === 1"></view>
							</view>
							<text class="text-gray-700">一般纳税人</text>
						</view>
					</view>
				</view>

				<!-- 执照类型 -->
				<view class="form-group mb-5">
					<text class="form-label block text-gray-800 mb-2 text-base">执照类型：</text>
					<u-select v-model="companyTypeIndex" :list="scaleList" placeholder="请选择执照类型"
						@confirm="handleCompanyTypeSelect" border-radius="8" input-align="left" border="none"
						placeholder-style="color: #999"></u-select>
				</view>

				<!-- 是否帮开发票 -->
				<view class="form-group mb-5">
					<text class="form-label block text-gray-800 mb-2 text-base">是否帮开发票：</text>
					<view class="flex flex-wrap">
						<view class="flex items-center mr-6 mb-2" @click="isInvoice = -1">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="isInvoice === -1"></view>
							</view>
							<text class="text-gray-700">全部</text>
						</view>
						<view class="flex items-center mr-6 mb-2" @click="isInvoice = 0">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="isInvoice === 0"></view>
							</view>
							<text class="text-gray-700">否</text>
						</view>
						<view class="flex items-center mr-6 mb-2" @click="isInvoice = 1">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="isInvoice === 1"></view>
							</view>
							<text class="text-gray-700">是</text>
						</view>
					</view>
				</view>

				<!-- 是否中介单 -->
				<view class="form-group">
					<text class="form-label block text-gray-800 mb-2 text-base">是否中介单：</text>
					<view class="flex flex-wrap">
						<view class="flex items-center mr-6 mb-2" @click="isAgent = -1">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="isAgent === -1"></view>
							</view>
							<text class="text-gray-700">全部</text>
						</view>
						<view class="flex items-center mr-6 mb-2" @click="isAgent = 0">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="isAgent === 0"></view>
							</view>
							<text class="text-gray-700">否</text>
						</view>
						<view class="flex items-center mr-6 mb-2" @click="isAgent = 1">
							<view
								class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center mr-2">
								<view class="w-2 h-2 rounded-full bg-primary" v-if="isAgent === 1"></view>
							</view>
							<text class="text-gray-700">是</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="modal-footer flex justify-between py-3 px-5 border-t border-gray-100">
				<view
					class="btn reset-btn flex-1 h-12 rounded-lg flex items-center justify-center bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all mr-3"
					@click="resetFilter">
					<text class="text-base">重置</text>
				</view>
				<view
					class="btn confirm-btn flex-1 h-12 rounded-lg flex items-center justify-center bg-primary text-white hover:bg-blue-600 transition-all"
					@click="confirmFilter">
					<text class="text-base">确认</text>
				</view>
			</view>
		</u-modal>

		<!-- 日期选择器 -->
		<u-datetime-picker :show="datePickerShow" v-model="selectedDate" mode="date" @confirm="handleDateConfirm"
			@cancel="datePickerShow = false" :border-radius="16" cancel-color="#666666"
			confirm-color="#4285F4"></u-datetime-picker>

		<!-- 加载中提示 -->
		<u-loading-page v-if="loading"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航相关
				navTitle: '报税管理',

				// 状态数据
				statusList: [{
						name: '已申报',
						value: 0,
						count: 24
					},
					{
						name: '未申报',
						value: 1,
						count: 18
					},
					{
						name: '待申报',
						value: 2,
						count: 12
					},
					{
						name: '申报失败',
						value: 3,
						count: 5
					},
					{
						name: '无需申报',
						value: 4,
						count: 8
					},
					{
						name: '部分申报',
						value: 5,
						count: 6
					}
				],
				selectedStatus: null,

				// 税种数据
				taxTypes: [{
						id: 0,
						name: '电税'
					},
					{
						id: 1,
						name: '个税'
					},
					{
						id: 2,
						name: '社保'
					},
					{
						id: 3,
						name: '生产经营'
					},
					{
						id: 4,
						name: '工商年审'
					},
					{
						id: 5,
						name: '税务年审'
					},
					{
						id: 6,
						name: '残疾人就业保障金'
					}
				],
				selectedTaxType: 0,

				// 区域数据
				regionList: [{
						id: 1,
						name: '北京'
					},
					{
						id: 2,
						name: '上海'
					},
					{
						id: 3,
						name: '广州'
					},
					{
						id: 4,
						name: '深圳'
					},
					{
						id: 5,
						name: '杭州'
					},
					{
						id: 6,
						name: '南京'
					}
				],
				selectedRegion: '',

				// 企业类型数据
				scaleList: [{
						id: 0,
						name: '个人独资企业'
					},
					{
						id: 1,
						name: '个体户'
					},
					{
						id: 2,
						name: '公司'
					},
					{
						id: 3,
						name: '合作企业'
					},
					{
						id: 4,
						name: '合作社'
					},
					{
						id: 5,
						name: '其他企业'
					}
				],
				companyTypeIndex: -1,

				// 筛选条件
				selectedTaxpayerType: -1,
				isInvoice: -1,
				isAgent: -1,

				// 日期选择
				selectedDate: Number(new Date()),
				formattedDate: '',
				datePickerShow: false,

				// 搜索
				searchKeyword: '',

				// 公司列表数据
				companyList: [],
				filteredCompanyList: [],

				// 选中的公司（用于批量操作）
				selectedCompanies: [],
				selectAll: false,

				// 弹窗相关
				declareModalShow: false,
				filterModalShow: false,
				currentCompany: null,
				declareRemark: '',
				uploadFiles: [],
				uploadUrl: 'https://example.com/upload',

				// 加载状态
				loading: false
			};
		},

		computed: {
			// 是否有选中的公司
			hasSelectedCompanies() {
				return this.selectedCompanies.length > 0;
			},
			// 新增：状态类名计算属性（支持传参）
			getStatusClass() {
				return (status) => {
					switch (status) {
						case 0:
							return 'status-success bg-green-100 text-green-700';
						case 1:
							return 'status-info bg-blue-100 text-blue-700';
						case 2:
							return 'status-warning bg-yellow-100 text-yellow-700';
						case 3:
							return 'status-danger bg-red-100 text-red-700';
						case 4:
							return 'status-gray bg-gray-100 text-gray-700';
						case 5:
							return 'status-partial bg-purple-100 text-purple-700';
						default:
							return '';
					}
				};
			}
		},

		onLoad() {
			// 初始化数据
			this.initData();

			// 设置默认日期为今天
			this.setDefaultDate();
		},

		methods: {
			getStatusClass() {
				return (status) => {
					switch (status) {
						case 0:
							return 'status-success bg-green-100 text-green-700';
						case 1:
							return 'status-info bg-blue-100 text-blue-700';
						case 2:
							return 'status-warning bg-yellow-100 text-yellow-700';
						case 3:
							return 'status-danger bg-red-100 text-red-700';
						case 4:
							return 'status-gray bg-gray-100 text-gray-700';
						case 5:
							return 'status-partial bg-purple-100 text-purple-700';
						default:
							return '';
					}
				};
			},
			// 初始化数据
			initData() {
				this.loading = true;

				// 模拟API请求获取公司列表数据
				setTimeout(() => {
					this.companyList = this.generateMockData();
					this.filteredCompanyList = [...this.companyList];
					this.loading = false;
				}, 500);
			},

			// 生成模拟数据
			generateMockData() {
				const mockData = [];
				const companyNames = [
					'科技创新有限公司', '未来发展有限公司', '智慧教育科技有限公司',
					'健康医疗科技有限公司', '绿色金融服务有限公司', '绿色物流有限公司',
					'绿色能源有限公司', '数字媒体有限公司', '国际贸易有限公司',
					'文化创意有限公司', '智能制造有限公司', '互联网科技有限公司',
					'农业科技有限公司', '旅游开发有限公司', '房地产开发有限公司'
				];

				const areas = ['北京', '上海', '广州', '深圳', '杭州', '南京'];
				const taxTypes = ['小规模纳税人', '一般纳税人'];
				const scales = ['个人独资企业', '个体户', '公司', '合作企业', '合作社', '其他企业'];

				for (let i = 0; i < 30; i++) {
					const declareState = Math.floor(Math.random() * 6); // 0-5的随机状态
					const isNeedReport = declareState !== 4; // 无需申报的不需要再申报

					mockData.push({
						id: i + 1,
						companyName: companyNames[i % companyNames.length] + (i > companyNames.length - 1 ? (i +
							1) : ''),
						area: areas[Math.floor(Math.random() * areas.length)],
						taxType: taxTypes[Math.floor(Math.random() * taxTypes.length)],
						scale: scales[Math.floor(Math.random() * scales.length)],
						declareState: declareState,
						taxAmount: (Math.random() * 10000).toFixed(2),
						isPay: Math.floor(Math.random() * 2), // 0:未扣款, 1:已扣款
						checkStatus: Math.floor(Math.random() * 3), // 0:未检查, 1:检查通过, 2:检查失败
						isKp: Math.random() > 0.7, // 是否开票
						isZjd: Math.random() > 0.8, // 是否中介单
						isNeedReport: isNeedReport,
						taxDetails: this.generateTaxDetails(),
						declareHistory: this.generateDeclareHistory()
					});
				}

				return mockData;
			},

			// 生成税费种详情
			generateTaxDetails() {
				const details = [];
				const taxNames = ['增值税', '消费税', '企业所得税', '印花税', '通用申报表'];

				for (let i = 0; i < taxNames.length; i++) {
					details.push({
						name: taxNames[i],
						amount: (Math.random() * 1000).toFixed(2),
						status: Math.floor(Math.random() * 4), // 0:已申报, 1:未申报, 2:申报失败, 3:无需申报
						declareTime: this.getRandomDate()
					});
				}

				return details;
			},

			// 生成申报历史
			generateDeclareHistory() {
				const history = [];
				const operators = ['张三', '李四', '王五', '赵六'];
				const statuses = ['已申报', '申报失败', '取消申报', '检查通过', '检查失败'];
				const remarks = ['正常申报', '数据异常', '重复申报', '已扣款', '未扣款款'];

				for (let i = 0; i < 3; i++) {
					history.push({
						time: this.getRandomDate(true),
						operator: operators[Math.floor(Math.random() * operators.length)],
						status: statuses[Math.floor(Math.random() * statuses.length)],
						remark: remarks[Math.floor(Math.random() * remarks.length)]
					});
				}

				// 按时间排序，最近的在前
				history.sort((a, b) => new Date(b.time) - new Date(a.time));

				return history;
			},

			// 获取随机日期
			getRandomDate(isPast = false) {
				const date = new Date();
				if (isPast) {
					// 过去的日期
					const days = Math.floor(Math.random() * 30);
					date.setDate(date.getDate() - days);
				} else {
					// 未来的日期
					const days = Math.floor(Math.random() * 30);
					date.setDate(date.getDate() + days);
				}

				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 格式化选中的日期
			formatSelectedDate() {
				const date = new Date(this.selectedDate);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				this.formattedDate = `${year}-${month}-${day}`;
			},

			// 设置默认日期为今天
			setDefaultDate() {
				this.selectedDate = Number(new Date());
				this.formatSelectedDate();
			},

			// 导航返回
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 切换状态筛选
			changeStatus(status) {
				this.selectedStatus = this.selectedStatus === status ? null : status;
				this.filterCompanies();
			},

			// 切换税种
			changeTaxType(typeId) {
				this.selectedTaxType = typeId;
				this.filterCompanies();
			},

			// 显示日期选择器
			showDatePicker() {
				this.datePickerShow = true;
			},

			// 处理日期确认
			handleDateConfirm(timestamp) {
				this.selectedDate = timestamp;
				this.formatSelectedDate();
				this.datePickerShow = false;
				this.filterCompanies();
			},

			// 处理搜索
			handleSearch() {
				this.filterCompanies();
			},

			// 筛选公司列表
			filterCompanies() {
				let filtered = [...this.companyList];

				// 按日期筛选
				if (this.selectedDate) {
					const selectedMonth = this.selectedDate.substring(0, 7); // 格式：YYYY-MM
					filtered = filtered.filter(company => {
						// 检查公司的申报历史中是否有该月份的记录
						return company.declareHistory.some(history => {
							const historyMonth = history.declareTime.substring(0, 7);
							return historyMonth === selectedMonth;
						});
					});
				}

				// 按状态筛选
				if (this.selectedStatus !== null) {
					filtered = filtered.filter(company => company.declareState === this.selectedStatus);
				}

				// 按搜索关键词筛选
				if (this.searchKeyword) {
					const keyword = this.searchKeyword.toLowerCase();
					filtered = filtered.filter(company =>
						company.companyName.toLowerCase().includes(keyword)
					);
				}

				// 按区域筛选
				if (this.selectedRegion) {
					filtered = filtered.filter(company => company.area === this.selectedRegion);
				}

				// 按企业资格类型筛选
				if (this.selectedTaxpayerType !== -1) {
					const taxTypeText = this.selectedTaxpayerType === 0 ? '小规模纳税人' : '一般纳税人';
					filtered = filtered.filter(company => company.taxType === taxTypeText);
				}

				// 按执照类型筛选
				if (this.companyTypeIndex >= 0) {
					const scaleText = this.scaleList[this.companyTypeIndex].name;
					filtered = filtered.filter(company => company.scale === scaleText);
				}

				// 按是否开票筛选
				if (this.isInvoice !== -1) {
					filtered = filtered.filter(company => company.isKp === (this.isInvoice === 1));
				}

				// 按是否中介单筛选
				if (this.isAgent !== -1) {
					filtered = filtered.filter(company => company.isZjd === (this.isAgent === 1));
				}

				this.filteredCompanyList = filtered;
			},

			// 显示公司详情
			showCompanyDetail(company) {
				uni.navigateTo({
					url: `/pages/tax/detail?id=${company.id}`
				});
			},

			// 处理申报
			handleDeclare(company) {
				if (!company.isNeedReport) {
					uni.showToast({
						title: '无需申报',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				this.currentCompany = company;
				this.declareRemark = '';
				this.uploadFiles = [];
				this.declareModalShow = true;
			},

			// 处理检查
			handleCheck(company) {
				uni.navigateTo({
					url: `/pages/tax/detail?id=${company.id}&check=true`
				});
			},

			// 是否判断文件变化
			handleFileChange(files) {
				this.uploadFiles = files;
			},

			// 处理申报成功
			handleDeclareSuccess() {
				if (!this.uploadFiles.length) {
					uni.showToast({
						title: '请上传申报图片',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 模拟申报成功
				this.loading = true;
				setTimeout(() => {
					// 更新公司状态
					const index = this.companyList.findIndex(company => company.id === this.currentCompany.id);
					if (index !== -1) {
						this.companyList[index].declareState = 0; // 已申报
						this.companyList[index].isNeedReport = false;
						this.filterCompanies();
					}

					// 更新选中的公司列表
					const selectedIndex = this.selectedCompanies.indexOf(this.currentCompany.id);
					if (selectedIndex !== -1) {
						this.selectedCompanies.splice(selectedIndex, 1);
						this.checkSelectAll();
					}

					this.declareModalShow = false;
					this.loading = false;

					uni.showToast({
						title: '申报成功',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 处理申报失败
			handleDeclareFail() {
				// 模拟申报失败
				this.loading = true;
				setTimeout(() => {
					// 更新公司状态
					const index = this.companyList.findIndex(company => company.id === this.currentCompany.id);
					if (index !== -1) {
						this.companyList[index].declareState = 3; // 申报失败
						this.filterCompanies();
					}

					this.declareModalShow = false;
					this.loading = false;

					uni.showToast({
						title: '已标记为申报失败',
						icon: 'none',
						duration: 2000
					});
				}, 1000);
			},

			// 显示筛选菜单
			showFilterMenu() {
				this.filterModalShow = true;
			},

			// 处理区域选择
			handleRegionSelect(e) {
				this.selectedRegion = e.value;
			},

			// 处理公司类型选择
			handleCompanyTypeSelect(e) {
				this.companyTypeIndex = e.index;
			},

			// 重置筛选
			resetFilter() {
				this.selectedRegion = '';
				this.selectedTaxpayerType = -1;
				this.companyTypeIndex = -1;
				this.isInvoice = -1;
				this.isAgent = -1;
			},

			// 关闭弹窗
			handleModalClose() {
				this.filterModalShow = false;
			},

			// 确认筛选
			confirmFilter() {
				this.filterModalShow = false;
				this.filterCompanies();
			},

			// 切换全选
			toggleSelectAll() {
				if (this.selectAll) {
					// 全选
					this.selectedCompanies = this.filteredCompanyList.map(company => company.id);
				} else {
					// 取消全选
					this.selectedCompanies = [];
				}
			},

			// 检查全选状态
			checkSelectAll() {
				this.selectAll = this.filteredCompanyList.length > 0 &&
					this.selectedCompanies.length === this.filteredCompanyList.length;
			},

			// 批量申报
			batchDeclare() {
				if (this.selectedCompanies.length === 0) {
					uni.showToast({
						title: '请选择要申报的公司',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 模拟批量申报
				this.loading = true;
				setTimeout(() => {
					// 更新公司状态
					this.companyList.forEach(company => {
						if (this.selectedCompanies.includes(company.id) && company.isNeedReport) {
							company.declareState = 0; // 已申报
							company.isNeedReport = false;
						}
					});

					this.selectedCompanies = [];
					this.selectAll = false;
					this.filterCompanies();
					this.loading = false;

					uni.showToast({
						title: '批量申报成功',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 批量取消
			batchCancel() {
				if (this.selectedCompanies.length === 0) {
					uni.showToast({
						title: '请选择要取消的公司',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 模拟批量取消
				this.loading = true;
				setTimeout(() => {
					// 更新公司状态
					this.companyList.forEach(company => {
						if (this.selectedCompanies.includes(company.id)) {
							company.declareState = 1; // 未申报
							company.isNeedReport = true;
						}
					});

					this.selectedCompanies = [];
					this.selectAll = false;
					this.filterCompanies();
					this.loading = false;

					uni.showToast({
						title: '批量取消成功',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 获取公司是否可以申报
			canDeclare(company) {
				return company.isNeedReport;
			},

			// 获取状态对应的样式类
			getStatusClass(status) {
				switch (status) {
					case 0:
						return 'status-success bg-green-100 text-green-700';
					case 1:
						return 'status-info bg-blue-100 text-blue-700';
					case 2:
						return 'status-warning bg-yellow-100 text-yellow-700';
					case 3:
						return 'status-danger bg-red-100 text-red-700';
					case 4:
						return 'status-gray bg-gray-100 text-gray-700';
					case 5:
						return 'status-partial bg-purple-100 text-purple-700';
					default:
						return '';
				}
			},

			// 获取状态对应的样式类后缀
			getStatusClassSuffix(status) {
				switch (status) {
					case 0:
						return 'success';
					case 1:
						return 'info';
					case 2:
						return 'warning';
					case 3:
						return 'danger';
					case 4:
						return 'gray';
					case 5:
						return 'partial';
					default:
						return '';
				}
			},

			// 获取状态对应的图标
			getStatusIcon(status) {
				switch (status) {
					case 0:
						return 'checkmark-circle-fill';
					case 1:
						return 'info-circle';
					case 2:
						return 'clock';
					case 3:
						return 'error-circle-fill';
					case 4:
						return 'minus-circle';
					case 5:
						return 'tags';
					default:
						return '';
				}
			},

			// 获取状态对应的颜色
			getStatusColor(status) {
				switch (status) {
					case 0:
						return '#28A745';
					case 1:
						return '#4285F4';
					case 2:
						return '#FF9900';
					case 3:
						return '#DC3545';
					case 4:
						return '#6C757D';
					case 5:
						return '#6F42C1';
					default:
						return '#333333';
				}
			},

			// 获取状态对应的文本
			getStatusText(status) {
				switch (status) {
					case 0:
						return '已申报';
					case 1:
						return '未申报';
					case 2:
						return '待申报';
					case 3:
						return '申报失败';
					case 4:
						return '无需申报';
					case 5:
						return '部分申报';
					default:
						return '';
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.header-title {
		font-size: 20px;
		font-weight: 600;
		color: #1E88E5;
	}

	.back-button {
		margin-right: 12px;
		color: #6b7280;
	}

	/* 页面容器 */
	.tax-management-page {
		background-color: #F5F7FA;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		--primary-color: #4285F4;
		--success-color: #28A745;
		--warning-color: #FF9900;
		--danger-color: #DC3545;
		--info-color: #17A2B8;
		--gray-color: #6C757D;
		--light-gray: #F8F9FA;
		--border-color: #E9ECEF;
	}

	/* 导航栏 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		transition: all 0.2s;

		&:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}
	}

	.navbar-title {
		white-space: nowrap;
		font-size: 18px;
		font-weight: 600;
		color: #1A1A1A;
		margin-left: 8px;
	}

	.navbar-right {
		display: flex;
		align-items: center;
	}

	.nav-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		transition: all 0.2s;

		&:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}
	}

	/* 状态卡片 */
	.status-cards {
		background-color: #FFFFFF;
		padding: 16px;
	}

	.status-container {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.status-card {
		// flex: 0 0 calc(50vw - 108rpx);
		// max-width: calc(50vw - 108rpx);
	}

	.status-scroll {
		white-space: nowrap;
		padding-bottom: 16px;
	}

	.status-card {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		border-radius: 12px;
		padding: 16px;
		width: calc(50vw - 100rpx);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
		cursor: pointer;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		}

		&.active {
			border: 2px solid var(--primary-color);
			background-color: rgba(66, 133, 244, 0.05);
		}

		.status-icon {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			/* margin-right: 12px; */

			&.status-success {
				background-color: rgba(40, 167, 69, 0.1);
			}

			&.status-info {
				background-color: rgba(66, 133, 244, 0.1);
			}

			&.status-warning {
				background-color: rgba(255, 153, 0, 0.1);
			}

			&.status-danger {
				background-color: rgba(220, 53, 69, 0.1);
			}

			&.status-gray {
				background-color: rgba(108, 117, 125, 0.1);
			}

			&.status-partial {
				background-color: rgba(108, 117, 125, 0.1);
			}
		}

		.status-info {
			flex: 1;

			.status-name {
				font-size: 14px;
				color: #666666;
				margin-bottom: 4px;
			}

			.status-count {
				font-size: 18px;
				font-weight: 600;
				color: #1A1A1A;
			}
		}
	}

	/* 税种选择 */
	.tax-type-tabs {
		background-color: #FFFFFF;
		padding: 12px 16px;
		border-bottom: 1px solid var(--border-color);
	}

	.tabs-scroll {
		white-space: nowrap;
		padding-bottom: 4px;
	}

	.tab-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px 16px;
		margin-right: 8px;
		background-color: var(--light-gray);
		border-radius: 20px;
		font-size: 14px;
		color: #666666;
		transition: all 0.2s;
		cursor: pointer;

		&:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}

		&.active {
			background-color: var(--primary-color);
			color: white;
			box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
		}
	}

	/* 搜索栏 */
	.search-bar {
		background-color: #FFFFFF;
		padding: 12px 16px;
		display: flex;
		align-items: center;
	}

	.search-input {
		flex: 1;
		position: relative;
		background-color: var(--light-gray);
		border-radius: 24px;
		padding: 0 16px 0 40px;
		height: 40px;
		/* margin-right: 12px; */

		input {
			width: 100%;
			height: 100%;
			background: transparent;
			border: none;
			outline: none;
			font-size: 14px;
			color: #1A1A1A;

			&::placeholder {
				color: #999999;
			}
		}

		.u-icon {
			position: absolute;
			left: 14px;
			top: 50%;
			transform: translateY(-50%);
			color: #999999;
			font-size: 16px;
		}
	}

	.date-picker {
		display: flex;
		align-items: center;
		background-color: var(--light-gray);
		border-radius: 24px;
		padding: 0 16px;
		height: 40px;
		min-width: 120px;
		cursor: pointer;
		transition: all 0.2s;

		&:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}

		.u-icon {
			color: #666666;
			font-size: 16px;
			margin-right: 6px;
		}

		text {
			font-size: 14px;
			color: #666666;
		}
	}

	/* 公司列表 */
	.company-list {
		padding: 16px;

		.company-card {
			background-color: white;
			border-radius: 12px;
			padding: 16px;
			margin-bottom: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			transition: all 0.3s;
			cursor: pointer;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 16px;

				.company-name {
					font-size: 16px;
					font-weight: 600;
					color: #1A1A1A;
					display: flex;
					align-items: center;

					.company-tags {
						display: flex;
						margin-left: 8px;

						.tag {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							padding: 2px 8px;
							border-radius: 12px;
							font-size: 12px;
							margin-right: 6px;

							&.bg-blue-100 {
								background-color: rgba(66, 133, 244, 0.1);
								color: var(--primary-color);
							}

							&.bg-green-100 {
								background-color: rgba(40, 167, 69, 0.1);
								color: var(--success-color);
							}
						}
					}
				}

				.company-region {
					font-size: 13px;
					color: #666666;
					display: flex;
					align-items: center;

					.u-icon {
						margin-right: 4px;
						font-size: 14px;
					}
				}
			}

			.card-body {
				.info-row {
					display: flex;
					align-items: center;
					margin-bottom: 12px;

					.label {
						font-size: 13px;
						color: #999999;
						width: 70px;
					}

					.value {
						flex: 1;
						font-size: 14px;
						color: #1A1A1A;
					}

					.u-icon {
						margin-right: 8px;
						font-size: 14px;
						color: #999999;
					}
				}
			}

			.card-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 16px;
				padding-top: 12px;
				border-top: 1px solid var(--border-color);

				.status-badge {
					padding: 4px 12px;
					border-radius: 16px;
					font-size: 12px;
					font-weight: 500;
					display: flex;
					align-items: center;

					.u-icon {
						margin-right: 4px;
						font-size: 12px;
					}

					&.status-success {
						background-color: rgba(40, 167, 69, 0.1);
						color: var(--success-color);
					}

					&.status-info {
						background-color: rgba(66, 133, 244, 0.1);
						color: var(--primary-color);
					}

					&.status-warning {
						background-color: rgba(255, 153, 0, 0.1);
						color: var(--warning-color);
					}

					&.status-danger {
						background-color: rgba(220, 53, 69, 0.1);
						color: var(--danger-color);
					}

					&.status-gray {
						background-color: rgba(108, 117, 125, 0.1);
						color: var(--gray-color);
					}

					&.status-partial {
						background-color: rgba(108, 117, 125, 0.1);
						color: var(--gray-color);
					}
				}

				.action-buttons {
					display: flex;

					.action-btn {
						padding: 4px 12px;
						border-radius: 16px;
						font-size: 12px;
						margin-left: 8px;
						display: flex;
						align-items: center;
						transition: all 0.2s;

						.btn-icon {
							margin-right: 4px;
							font-size: 12px;
						}

						&:active {
							transform: scale(0.95);
						}

						&.disabled {
							opacity: 0.5;
							cursor: not-allowed;
						}

						&.bg-primary {
							background-color: var(--primary-color);
							color: white;

							&:hover {
								background-color: #3367D6;
							}
						}

						&.bg-gray-100 {
							background-color: var(--light-gray);
							color: #666666;

							&:hover {
								background-color: rgba(0, 0, 0, 0.05);
							}
						}
					}
				}
			}
		}

		.no-data {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60px 0;
			color: #999999;

			.u-icon {
				font-size: 60px;
				margin-bottom: 16px;
				color: #E5E7EB;
			}

			.no-data-title {
				font-size: 16px;
				color: #666666;
				margin-bottom: 8px;
			}

			.no-data-desc {
				font-size: 14px;
				color: #999999;
			}
		}
	}

	/* 底部操作栏 */
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 56px;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 10;

		.select-all {
			display: flex;
			align-items: center;

			.u-checkbox {
				margin-right: 8px;
			}

			text {
				font-size: 14px;
				color: #1A1A1A;
			}
		}

		.action-buttons {
			display: flex;

			.btn {
				padding: 0 20px;
				height: 36px;
				border-radius: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-weight: 500;
				margin-left: 12px;
				transition: all 0.2s;

				.u-icon {
					margin-right: 6px;
					font-size: 16px;
				}

				&:active {
					transform: scale(0.95);
				}

				&.batch-declare {
					background-color: var(--primary-color);
					color: white;

					&:hover {
						background-color: #3367D6;
					}
				}

				&.batch-cancel {
					background-color: var(--danger-color);
					color: white;

					&:hover {
						background-color: #C82333;
					}
				}
			}
		}
	}

	/* 申报弹窗 */
	.declare-form {
		.form-group {
			margin-bottom: 20px;

			.form-label {
				display: block;
				font-size: 14px;
				color: #1A1A1A;
				margin-bottom: 8px;
				font-weight: 500;
			}
		}

		.remark-input {
			width: 100%;
			height: 100px;
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 12px;
			font-size: 14px;
			color: #1A1A1A;
			resize: none;
			transition: all 0.2s;

			&:focus {
				border-color: var(--primary-color);
				box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
				outline: none;
			}

			&::placeholder {
				color: #999999;
			}
		}
	}

	/* 筛选弹窗 */
	.filter-form {
		.form-group {
			margin-bottom: 20px;

			.form-label {
				display: block;
				font-size: 14px;
				color: #1A1A1A;
				margin-bottom: 8px;
				font-weight: 500;
			}
		}

		.u-radio-group {
			display: flex;
			flex-wrap: wrap;

			.u-radio {
				margin-right: 20px;
				margin-bottom: 12px;
				font-size: 14px;

				.u-radio__icon {
					width: 16px;
					height: 16px;
				}
			}
		}
	}

	/* 弹窗底部按钮 */
	.modal-footer {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		margin-top: 10px;
		border-top: 1px solid var(--border-color);

		.btn {
			padding: 0 20px;
			height: 40px;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: 500;
			flex: 1;
			margin: 0 8px;
			transition: all 0.2s;

			&:active {
				transform: scale(0.95);
			}

			&.cancel-btn {
				background-color: var(--light-gray);
				color: #666666;

				&:hover {
					background-color: rgba(0, 0, 0, 0.05);
				}
			}

			&.fail-btn {
				background-color: var(--danger-color);
				color: white;

				&:hover {
					background-color: #C82333;
				}
			}

			&.success-btn {
				background-color: var(--primary-color);
				color: white;

				&:hover {
					background-color: #3367D6;
				}
			}

			&.reset-btn {
				background-color: var(--light-gray);
				color: #666666;

				&:hover {
					background-color: rgba(0, 0, 0, 0.05);
				}
			}

			&.confirm-btn {
				background-color: var(--primary-color);
				color: white;

				&:hover {
					background-color: #3367D6;
				}
			}
		}
	}
</style>